import { ref, computed, onMounted } from 'vue';
import { search } from '../api/user/user';

export const useUserSearch = () => {
  const data = ref([]);

  const pagination = ref({
    page: 1,
    rowsPerPage: 10,
    rowsNumber: 10
  });

  const pagesNumber = computed(() =>
    Math.ceil(data.value.length / pagination.value.rowsPerPage)
  );

  const fetchData = () => {
    const pageable = {
      page: pagination.value.page - 1,
      size: pagination.value.rowsPerPage
    };

    search(pageable).then(res => {
      // console.log(res.totalElements);
      data.value = res.content;
      pagination.value.page = res.number + 1;
      // pagination.value.rowsPerPage = res.size;
      pagination.value.rowsNumber = res.totalElements;
    });
  };

  onMounted(fetchData);

  return {
    data,
    pagination,
    pagesNumber,
    fetchData
  };
};
